<template>
  <div class="produce-list-wrap">
    <PageTop firstMenu="商品管理" secondMenu="商品列表" title="商品列表" @add-thing="$to('produceListCreate')"></PageTop>
    <div class="search-container">
      <el-select class="right-margin" clearable size="small" v-model="category" placeholder="选择商品分类">
        <el-option v-for="item in categorys" :key="item.id" :label="item.class_name" :value="item.id"></el-option>
      </el-select>

      <el-select class="right-margin" clearable size="small" v-model="status" placeholder="选择商品状态">
        <el-option v-for="item in statusDatas" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-checkbox v-model="checked">选择未设置配料商品</el-checkbox>
      <div class="search-wrap">
        <el-input size="small" class="search" clearable v-model="keyword" placeholder="输入标题关键字搜索"></el-input>
        <el-button plain size="small" type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <tableList :tableData="listData" @getData="getData"></tableList>

    <div class="page-wrap">
      <el-pagination 
      class="page-count" 
      @current-change="getData" 
      background layout="total, prev, pager, next" 
      :total="totalCount" 
      :current-page.sync='page' 
      :page-size="15"></el-pagination>
    </div>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop, Component, Emit, Watch } from 'vue-property-decorator';
import PageTop from '@/components/pageTop.vue';
import tableList from '@/tables/produceListTable.vue';
import AjaxResquest from '@/api/apiRequest';
@Component({
  components: {
    PageTop,
    tableList
  }
})
export default class ProduceList extends Vue {
  listRes!: AjaxResquest;
  categoryRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;
  // 状态
  statusDatas: any[] = [
    { label: '上架', value: 1 },
    { label: '下架', value: 2 }
  ];
  status: string = '';
  // 商品分类
  categorys: any[] = [];
  category: string = '';
  keyword: string = '';
  checked: boolean = false;
  ids: any = '';
  $router!: any;

  mounted() {
    // TODO
    if (this.$route.query.search) {
      this.ids = this.$route.query.id;
    }
    this.listRes = new AjaxResquest('/goods/getGoodsList');
    this.categoryRes = new AjaxResquest('/goods/getClassList');
    this.getData();
    this.getCategory();
  }
  getCategory() {
    this.categoryRes.getFunction().then((res: any) => {
      this.categorys = res.data.data.types;
    });
  }
  search() {
    this.ids = '';
    this.$router.replace({ path: this.$router.path });
    this.getData();
  }
  getData() {
    let data: any = {
      page: this.page,
      pageSize: this.pageSize,
      keyWord: this.keyword,
      haveSetMaterials: this.checked === true ? 1 : 0,
      classId: this.category,
      status: this.status
    };
    if (this.ids) {
      this.$notify({
        title: '查询信息',
        message: '当前为搜索结果,点击查询按钮查看全部结果',
        position: 'top-left',
        duration: 0
      });
      data = { ...data, goodsId: this.ids };
    }
    this.listRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
}
</script>
<style lang="less">
.produce-list-wrap {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  .search-container {
    text-align: left;
    // display: flex;
    // height: 32px;
    margin: 0px 10px 15px 0;
    // justify-content: flex-start;
    .search {
      margin-top: 15px;
      width: 250px;
      margin-right: 10px;
    }
  }
  .page-count-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 15px;
  }
}
</style>
